{% for page in pagination.items %}
    <div class="gdlr-core-item-list gdlr-core-blog-full  gdlr-core-item-mglr gdlr-core-style-left">
        {% if page.thumbnail is not null %}
            <div class="gdlr-core-blog-thumbnail-wrap clearfix">
                <div class="gdlr-core-blog-thumbnail gdlr-core-media-image  gdlr-core-opacity-on-hover gdlr-core-zoom-on-hover">
                    <a href={{ path('article_content', {id: page.id}) }}>
                        <img src="{{ asset(page.thumbnail) }}" alt width=1000 height=486>
                    </a>
                </div>
                <a href="javascript:void(0);" class="zilla-likes page-like" title="喜欢" id="{{ page.id }}">
                    <span class="zilla-likes-count">{{ page.page_like }}</span>
                </a>
            </div>
        {% endif %}
        <div class=gdlr-core-blog-full-content-wrap>
            <div class="gdlr-core-blog-full-head clearfix">
                <div class=gdlr-core-blog-full-head-right>
                    <h3 class="gdlr-core-blog-title gdlr-core-skin-title">
                        <a href="{{ path('article_content', {id: page.id}) }}">{{ page.title }}</a>
                    </h3>
                    <div class="gdlr-core-blog-info-wrapper gdlr-core-skin-divider">
                        <span class="gdlr-core-blog-info gdlr-core-blog-info-font gdlr-core-skin-caption gdlr-core-blog-info-author">
                            <img alt src='{% if page.avatar is not null %}{{ page.avatar }}{% else %}{{ asset('images/sf-positive.svg') }}{% endif %}' class='avatar avatar-50 photo' height=50 width=50>
                            {{ page.category }}
                        </span>
                        <span class="gdlr-core-blog-info gdlr-core-blog-info-font gdlr-core-skin-caption gdlr-core-blog-info-date">
                            {{ page.publish_time|date('Y-m-d H:i:s', 'PRC') }}
                        </span>
                        {% if page.thumbnail is null %}
                            <span class="gdlr-core-blog-info gdlr-core-blog-info-font gdlr-core-skin-caption gdlr-core-blog-info">
                                <a href="javascript:void(0);" class="page-like" title="喜欢" id="{{ page.id }}">
                                    <i class="fa fa-heart-o"></i>
                                    <span class="zilla-likes-count">{{ page.page_like }}</span>
                                </a>
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="gdlr-core-blog-content">
                {{ page.summary }}
            </div>
            <div class="gdlr-core-social-share-item gdlr-core-item-pdb  gdlr-core-left-align gdlr-core-social-share-left-text gdlr-core-style-plain">
                <div class="tagcloud">
                    {% for tag in page.page_tags %}
                        <a class="tag-cloud-link tag-link-117 tag-link-position-1" style="padding: 5px 10px; margin: 0px 6px 6px 0px !important;">{{ tag }}</a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endfor %}

<script>
    let total = {{ total }};
    let offset = {{ offset }};
    jQuery("#load-more-page").attr('offset', offset);
    if (total < 10) {
        jQuery("#load-more-page").html('已经到底啦');
        jQuery("#load-more-page").attr('end', 'on');
    }

    jQuery(function ($) {
        $('.page-like').on('click', function () {
            let link = $(this);
            if (link.hasClass('active') || link.find('i').hasClass('fa-heart')) return false;
            let id = $(this).attr('id');
            $.ajax({
                type: 'POST',
                url: '/common/like/' + id,
                dataType: 'json',
                data: {},
                success: function (data) {
                    if (data.result.success) {
                        link.addClass('active');
                        link.find('i').attr('class', 'fa fa-heart');
                        let num = parseInt(link.find('.zilla-likes-count').html()) + 1;
                        link.find('.zilla-likes-count').html(num)
                    } else {
                        new NoticeJs({
                            text: data.result.error_msg,
                            type: 'warning',
                            position: 'topCenter',
                            progressBar: true,
                            timeout: 30,
                            animation: {
                                open: 'animated fadeIn',
                                close: 'animated fadeOut'
                            }
                        }).show();
                    }
                },
            });
            return false;
        });
    });
</script>